<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .default{
            background-color: white;
        }
        .success{
            background-color: rgb(192, 252, 102);
        }
        .warning{
            background-color: rgb(252, 158, 104);
        }
    </style>
</head>
<body>
    <div id="app">
        <button class="btn">默认</button>
        <button class="default">默认</button>
        <button class="success">成功</button>
        <button class="warning">警告</button>
    </div>
    <script>
        //let a=document.querySelector('.default').className;
        //let a=document.querySelector('.success').getAttribute('class');
        //console.log(a);
        let b=document.querySelector('.btn');
        document.querySelector('.default').addEventListener('click',function(){
            //console.log(this.getAttribute('class'));
            //document.querySelector('.btn').innerText=this.innerHTML;
            //document.querySelector('.btn').className=this.className;
            b.innerText=this.innerHTML;
            b.className=this.className;
        });
        document.querySelector('.success').addEventListener('click',function(){
            //document.querySelector('.btn').innerHTML=this.innerHTML;
            //document.querySelector('.btn').className=this.className;
            b.innerText=this.innerHTML;
            b.className=this.className;
        });
        document.querySelector('.warning').addEventListener('click',function(){
            //document.querySelector('.btn').innerText=this.innerHTML;
            //document.querySelector('.btn').className=this.className;
            b.innerText=this.innerHTML;
            b.className=this.className;
        })
    </script>
</body>
</html>